<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="商户列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-select title="商户号" :up-table="true" :sreach="true" name="mchtId"
                                     :options="mchtList"></form-select>
                        <form-select title="商户主类型" :up-table="true" :sreach="true" name="mchtType"
                                     :options="dictList"></form-select>
                        <form-date-time title="入驻开始时间" :up-table="true" name="beginTime"></form-date-time>
                        <form-date-time title="入驻结束时间" :up-table="true" name="endTime"></form-date-time>
                        <span class="pull-right">
                            <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                            <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                        </span>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table></table>
                </theme-box>
            </div>
        </div>
        <modal-container title="修改" v-el:modal v-ref:modal class="edit-modal" theme="big">
            <form @submit.prevent @reset.prevent v-el:mform>
                <div class="modal-body">
                    <table-modal :item="item" :columns-set="columnsSet" v-ref:item></table-modal>
                    <!--<span class="more"><a href="javascript:;">更多...</a></span>-->
                </div>
                <div class="modal-footer">
                    <v-button data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                    <v-button theme="primary" type="submit">保存</v-button>
                </div>
            </form>
        </modal-container>

        <modal-container title="详情" v-el:detail-modal v-ref:detail-modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:detail-mform>
                <div class="modal-body">
                    <!-- <table-modal :item="item" :columns-set="columnsDetailSet"></table-modal> -->
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td style="width:50%">商户名称</td>
                            <td>{{item.mchtName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户别名</td>
                            <td>{{item.mchtRname}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户描述</td>
                            <td style="word-wrap:break-word;word-break:break-all;">{{item.mchtDsc}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户封面</td>
                            <td><img class="table-avatar" :src="item.mchtLogUrl" style="width:30%"></td>
                        </tr>
                        <tr>
                            <td style="width:50%">上级商户名称</td>
                            <td>{{item.upperMchtName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商圈商户</td>
                            <td>{{item.tdAreaName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户类型</td>
                            <td>{{item.mchtMainTypeValue}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户主类型</td>
                            <td>{{item.mchtTypeValue}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户次类型</td>
                            <td>{{item.mchtType2Value}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户级别</td>
                            <td>{{item.mchtLvl}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">抓取设备标志</td>
                            <td>{{item.mchtEquip == "0" ? "有" : "没有"}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商区园区标识</td>
                            <td>{{item.streamDbt == "bussiness" ? "商区" : "园区"}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">人均消费</td>
                            <td>{{item.mchtPer}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%" v-bind:value='mchtFacil'>商户设施</td>
                            <td>{{mchtFacil}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">营业日</td>
                            <td>{{mchtBusDay}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">营业时间段</td>
                            <td>{{item.mchtBusTime}}</td>
                        </tr>
                        <tr v-show="item.mchtBusDay2">
                            <td style="width:50%">营业日2</td>
                            <td>{{mchtBusDay2}}</td>
                        </tr>
                        <tr v-show="item.mchtBusTime2">
                            <td style="width:50%">营业时间段2</td>
                            <td>{{item.mchtBusTime2}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">固定电话1</td>
                            <td>{{item.mchtTel1}}</td>
                        </tr>
                        <tr v-show="item.mchtTel2">
                            <td style="width:50%">固定电话2</td>
                            <td>{{item.mchtTel2}}</td>
                        </tr>
                        <tr v-show="item.mchtTel3">
                            <td style="width:50%">固定电话3</td>
                            <td>{{item.mchtTel3}}</td>
                        </tr>
                        <tr v-show="item.mchtTel4">
                            <td style="width:50%">固定电话其他</td>
                            <td>{{item.mchtTel4}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">评分</td>
                            <td>{{item.mchtComScore}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">评分次数</td>
                            <td>{{item.mchtComNum}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户详细地址</td>
                            <td style="word-wrap:break-word;word-break:break-all;">{{item.mchtAddr}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">入驻时间</td>
                            <td>{{item.enterTime}}</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                </div>
            </form>
        </modal-container>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn + .btn {
        margin-right: 10px;
    }
</style>
<style>
    .modal-content {
        position: relative;
    }

    .more {
        position: absolute;
        left: 8%;
    }
</style>
<script>
    //解决datatables弹窗警告
    $.fn.dataTable.ext.errMode = 'none';
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'

    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"


    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            item: {},
            mchtType2: "",
            mchtFacil: '',
            mchtBusDay: '',
            mchtBusDay2: '',
            mchtBusTime: '',
            mchtList: [],
            dictList: [],
            columnsSet: [],
            mchtSheshi: [
                {key: "WIFI", value: "A1"},
                {key: "可停车", value: "A2"},
                {key: "刷卡", value: "A3"},
                {key: "卡座", value: "A4"},
                {key: "包间", value: "A5"},
                {key: "宝宝椅", value: "A6"},
                {key: "无烟区", value: "A7"},
                {key: "吸烟区", value: "A8"},
                {key: "沙发位", value: "A9"},
                {key: "露天位", value: "A10"},
                {key: "表演", value: "A11"},
                {key: "景观位", value: "A12"},
            ],
            mchtDay: [
                {key: "星期一", value: "1"},
                {key: "星期二", value: "2"},
                {key: "星期三", value: "3"},
                {key: "星期四", value: "4"},
                {key: "星期五", value: "5"},
                {key: "星期六", value: "6"},
                {key: "星期日", value: "7"},
            ],
            mchtDay2: [
                {key: "星期一", value: "B1"},
                {key: "星期二", value: "B2"},
                {key: "星期三", value: "B3"},
                {key: "星期四", value: "B4"},
                {key: "星期五", value: "B5"},
                {key: "星期六", value: "B6"},
                {key: "星期日", value: "B7"},
            ],
            stateOptions: [{
                key: "所有状态",
                value: ""
            }, {
                key: "开启",
                value: "0"
            }, {
                key: "关闭",
                value: "1"
            }],
            streamDbt: [
                {key: "节假日", value: "0"},
                {key: "工作日", value: "1"},
            ],
        }),
        computed: {},
        methods: {
            //还原弹出框位置
            resetBindDrag () {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //详情按钮
            // details: function() {
            //     dataTable.ajax.reload();
            // },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            },
            getMcht (data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    if (list.length == 1) {
                        list.unshift({key: "商户", value: ""});
                        self.$set("mchtList", list);
                    } else {
                        list.unshift({key: "所有商户", value: ""});
                        self.$set("mchtList", list);
                        self.mchtIdValue = list[0].value
                    }
                }, error => {
                });
            },
            dictFn (data) {
                let self = this;
                self.$post({
                    url: "/api/v1" + projectName_Url + "/list/caterdict/0",
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    var _array = [];
                    for (var i = 0; i < list.length; i++) {
                        _array.push({value: list[i].dictId, key: list[i].dictValue})
                    }
                    _array.unshift({key: "所有类型", value: ""});
                    self.$set("dictList", _array)
                }, error => {
                });
            },
            getSelect: function (type) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: 'get',
                        url: "/api/v1" + projectName_Url + "/list/caterdict/back_type/" + type,
                        success: function (rep) {
                            resolve(rep);
                        }
                    });
                });
            }
        },
        created () {
            //主页面datatable所用数组
            columnsSet = [{
                title: "商户号",
                data: "mchtId",
                visible: false,
                className: 'operate'
            }, {
                title: "商户名称",
                data: "mchtName",
                edit: true,
                readonly: true,
                className: 'operate'
            }, {
                title: "商户别名",
                data: "mchtRname",
                visible: false,
                edit: true,
                className: 'operate'
            }, {
                title: "商户描述",
                data: "mchtDsc",
                visible: false,
                edit: true,
                className: 'operate'
            }, {
                title: "商户封面",
                data: "mchtLogUrl",
                className: 'operate',
                render: function (data) {
                    return `<img class="table-avatar" src=` + data + `>`
                }
            }, {
                title: "商户封面",
                data: "file",
                visible: false,
                img: true,
                upload: true,
                className: 'operate',
            }, {
                title: "上级商户名称",
                data: "upperMchtId",
                visible: false,
                className: 'operate'
            }, {
                title: "上级商户名称",
                data: "upperMchtName",
                className: 'operate',
                edit: true,
                readonly: true
            }, {
                title: "商圈商户",
                data: "tdArea",
                visible: false,
                className: 'operate',
            }, {
                title: "商圈商户",
                data: "tdAreaName",
                className: 'operate',
            }, {
                title: "商户类型",
                data: "mchtMainType",
                visible: false,
                readonly: false,
                className: 'operate',
            }, {
                title: "商户类型",
                data: "mchtMainTypeValue",
                className: 'operate',
            }, {
                title: "商户主类型",
                data: "mchtType",
                visible: false,
                readonly: false,
                className: 'operate',
            },
                {
                    title: "商户主类型",
                    data: "mchtTypeValue",
                    className: 'operate',
                },
                {
                    title: "商户次类型",
                    data: "mchtType2",
                    visible: false,
                    readonly: false,
                    className: "operate"
                },
                {
                    title: "商户次类型",
                    data: "mchtType2Value",
                    className: "operate"
                }, {
                    title: "商户级别",
                    data: "mchtLvl",
                    visible: false,
                    edit: true,
                    readonly: true,
                    className: 'operate'
                }, {
                    title: "抓取设备标识",
                    data: "mchtEquip",
                    visible: false,
                    className: 'operate',
                    options: [
                        {key: "有", value: "0"},
                        {key: "没有", value: "1"},
                    ],
                    render: function (data) {
                        return (data == "0") ? "有" : "没有"
                    }
                }, {
                    title: "商区园区标识",
                    data: "streamDbt",
                    className: 'operate',
                    options: [
                        {key: "商区", value: "business"},
                        {key: "园区", value: "park"},
                    ],
                    render: function (data) {
                        return (data == "business") ? "商区" : "园区"
                    }
                }, {
                    title: "人均消费",
                    data: "mchtPer",
                    edit: true,
                    className: 'operate'
                }, {
                    title: "商户设施",
                    data: "mchtFacil",
                    visible: false,
                    className: 'operate',
                    checkboxOptions: [
                        {key: "WIFI", value: "A1"},
                        {key: "可停车", value: "A2"},
                        {key: "刷卡", value: "A3"},
                        {key: "卡座", value: "A4"},
                        {key: "包间", value: "A5"},
                        {key: "宝宝椅", value: "A6"},
                        {key: "无烟区", value: "A7"},
                        {key: "吸烟区", value: "A8"},
                        {key: "沙发位", value: "A9"},
                        {key: "露天位", value: "A10"},
                        {key: "表演", value: "A11"},
                        {key: "景观位", value: "A12"},
                    ],
                }, {
                    title: "营业日",
                    data: "mchtBusDay",
                    visible: false,
                    className: 'operate',
                    checkboxOptions: [
                        {key: "星期一", value: "1"},
                        {key: "星期二", value: "2"},
                        {key: "星期三", value: "3"},
                        {key: "星期四", value: "4"},
                        {key: "星期五", value: "5"},
                        {key: "星期六", value: "6"},
                        {key: "星期日", value: "7"},
                    ],
                    //     render:(value,type,row) => ({"1":"星期一","1":"app", "10": "web", "100": "微信","11": "app,web","101": "app,微信","110": "web,微信","111": "app,web,微信"})[+row.deployAgent]
                }, {
                    title: "营业开始时间段",
                    data: "mchtBusTime",
                    visible: false,
                    className: 'operate',
                    datetime: true
                }, {
                    title: "营业结束时间段",
                    data: "mchtBusEndTime",
                    visible: false,
                    className: 'operate',
                    datetime: true
                }, {
                    title: "固定电话1",
                    data: "mchtTel1",
                    visible: false,
                    edit: true,
                    className: 'operate'
                }, {
                    title: "营业日2",
                    data: "mchtBusDay2",
                    visible: false,
                    className: 'operate',
                    checkboxOptions: [
                        {key: "星期一", value: "B1"},
                        {key: "星期二", value: "B2"},
                        {key: "星期三", value: "B3"},
                        {key: "星期四", value: "B4"},
                        {key: "星期五", value: "B5"},
                        {key: "星期六", value: "B6"},
                        {key: "星期日", value: "B7"},
                    ],
                }, {
                    title: "营业开始时间段2",
                    data: "mchtBusTime2",
                    visible: false,
                    className: 'operate',
                    datetime: true
                }, {
                    title: "营业结束时间段2",
                    data: "mchtBusEndTime2",
                    visible: false,
                    className: 'operate',
                    datetime: true
                }, {
                    title: "固定电话2",
                    data: "mchtTel2",
                    visible: false,
                    edit: true,
                    className: 'operate'
                }, {
                    title: "固定电话3",
                    data: "mchtTel3",
                    visible: false,
                    edit: true,
                    className: 'operate'
                }, {
                    title: "固定电话其他",
                    data: "mchtTel4",
                    edit: true,
                    visible: false,
                    className: 'operate'
                }, {
                    title: "入驻时间",
                    data: "enterTime",
                    edit: true,
                    readonly: true,
                    className: 'operate',
                    render: function (data) {
                        return dateFormat(data)
                    }
                }, {
                    title: "商户详细地址",
                    data: "mchtAddr",
                    visible: false,
                    edit: true,
                    className: 'operate'
                },
                {
                    title: "相关操作",
                    className: "operate",
                    width: "120px",
                    render: function (value, type, row) {
                        if (row.mchtStat == 1) {
                            return `
                        <button type="button" class="btn btn-danger btn-sm state">开启</button>
                        `
                        } else {
                            return `
                    <button type="button" class="btn btn-primary btn-sm edit">修改</button>
                    <button type="button" class="btn btn-defalt btn-sm detail">详情</button>
                    <button type="button" class="btn btn-danger btn-sm state">退出</button>
                      `
                        }
                    }
                }];
        },

        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2",
                startDate: '',
                endDate: ''
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            self.getMcht();
            self.dictFn();
            var mchtTypeWatch = function () {
            };
            var mchtIdent;
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //对申请日期进行数据处理
                    _data.beginTime = _data.beginTime.replace(/-/g, "");
                    _data.endTime = _data.endTime.replace(/-/g, "");
                    //判断日期
                    if (_data.beginTime.length > 0 && _data.endTime.length > 0) {
                        if (_data.beginTime - _data.endTime > 0) {
                            Midway.alert({title: "操作提示", content: '入驻开始时间不能大于入驻结束时间'})
                            // return false
                        }
                    } else if (_data.beginTime.length > 0 && _data.endTime.length <= 0) {
                        Midway.alert({title: "操作提示", content: '入驻结束时间不能为空'})
                        // return false
                    } else if (_data.beginTime.length <= 0 && _data.endTime.length > 0) {
                        Midway.alert({title: "操作提示", content: '入驻开始时间不能为空'})
                        // return false
                    }
                    //发送请求
                    var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/mcht/query/" + mchtId,
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total || 0,
                        recordsFiltered: result.content.total || 0,
                        data: result.content.mchtList || []
                    })
                }
            });


            $(self.$el).on("click", ".edit", function () {
                setTimeout(() => {
                    dateTime({
                        format: "hh:ii",
                        startDate: '',
                        endDate: '',
                        minView: 0,
                        maxView: 2,
                        minuteStep: 1,
                        startView: 0 //显示视图从时分开始
                    });
                    //隐藏日期title
                    $('.datetimepicker .datetimepicker-minutes .table-condensed thead tr th:nth-child(2)').css('visibility', 'hidden')
                    //使用时间段回显
                    var _str = dataArray.mchtBusTime.split("-");
                    dataArray.mchtBusTime = $.trim(_str[0]);
                    // dataArray.mchtBusEndTime = $.trim(_str[1]);
                    $("input[name = 'mchtBusEndTime']").val($.trim(_str[1]))
                    //使用时间段2回显
                    if (dataArray.mchtBusTime2 != '' || dataArray.mchtBusTime2 != 'null') {
                        var _str2 = dataArray.mchtBusTime2.split("-");
                        dataArray.mchtBusTime2 = $.trim(_str2[0]);
                        $("input[name = 'mchtBusEndTime2']").val($.trim(_str2[1]))
                    }
                }, 500)
                // dateTime();
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                self.item = dataArray;
                //modFlag是0的时候  商户类型 主类型 此类型不可以修改
                if (dataArray.modFlag == '0') {
                    self.columnsSet.find(data => data.data == "mchtMainType").readonly = true;
                    self.columnsSet.find(data => data.data == "mchtType").readonly = true;
                    self.columnsSet.find(data => data.data == "mchtType2").readonly = true;
                } else {
                    self.columnsSet.find(data => data.data == "mchtMainType").readonly = false;
                    self.columnsSet.find(data => data.data == "mchtType").readonly = false;
                    self.columnsSet.find(data => data.data == "mchtType2").readonly = false;
                }
                if(self.item.mchtIdent != '3'){
                    //商户类型
                    self.$post({
                        url: "/api/v1" + projectName_Url + "/list/caterdict/back_type/0",
                        method: "GET"
                    }).then(response => {
                        let list = response.content.info;
                        var _array = [];
                        for (let i = 0; i < list.length; i++) {
                            _array.push({value: list[i].value, key: list[i].key});
                        }
                        self.$set("columnsSet[10].options", _array)
                        // self.columnsSet.find(data => data.data == "mchtMainType").options = _array;
                    }, error => {
                    });
                    //商户主类型
                    self.$post({
                        url: "/api/v1" + projectName_Url + "/list/caterdict/" + dataArray.mchtMainType + "/0",
                        method: "GET"
                    }).then(response => {
                        let list = response.content.info;
                        var _array = [];
                        for (let i = 0; i < list.length; i++) {
                            _array.push({value: list[i].dictId, key: list[i].dictValue});
                        }
                        self.$set("columnsSet[12].options", _array)
                        // self.columnsSet.find(data => data.data == "mchtType").options = _array;
                    }, error => {
                    });
                    //商户次类型
                    self.$post({
                        url: "/api/v1" + projectName_Url + "/list/caterdict/" + dataArray.mchtMainType + '/1',
                        method: "GET"
                    }).then(response => {
                        let list = response.content.info;
                        var _array = [];
                        for (let i = 0; i < list.length; i++) {
                            _array.push({value: list[i].dictId, key: list[i].dictValue});
                        }
                        self.$set("columnsSet[14].options", _array)
                        // self.columnsSet.find(data => data.data == "mchtType2").options = _array;
                    }, error => {
                    });
                    // 监听商户类型变化
                    mchtTypeWatch()
                    mchtTypeWatch = self.$refs.item.$watch("item.mchtMainType", function (v) {
                        self.$post({
                            url: "/api/v1" + projectName_Url + "/list/caterdict/" + v + '/0',
                            method: "GET"
                        }).then(response => {
                            let list = response.content.info;
                            var _array = [];
                            for (let i = 0; i < list.length; i++) {
                                _array.push({value: list[i].dictId, key: list[i].dictValue});
                            }
                            self.$set("columnsSet[12].options", _array)
                        }, error => {
                        });
                        self.$post({
                            url: "/api/v1" + projectName_Url + "/list/caterdict/" + v + '/1',
                            method: "GET"
                        }).then(response => {
                            let list = response.content.info;
                            var _array = [];
                            for (let i = 0; i < list.length; i++) {
                                _array.push({value: list[i].dictId, key: list[i].dictValue});
                            }
                            self.$set("columnsSet[14].options", _array)
                        }, error => {
                        });
                    });
                }else{
                    self.$set("columnsSet[10].options", '')
                    self.$set("columnsSet[12].options", '')
                    self.$set("columnsSet[14].options", '')
                }

                if (dataArray.mchtIdent == '4') {
                    self.columnsSet.find(data => data.data == "tdArea").options = '';
                } else {
                    //请求商圈商户
                    self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/mcht/getTdarealist",
                        method: "POST"
                    }).then(response => {
                        let list = response.content.info;
                        var _array = [];
                        for (let i = 0; i < list.length; i++) {
                            _array.push({value: list[i].mchtId, key: list[i].mchtName});
                        }
                        _array.push({value: "", key: "无"});
                        self.$set("columnsSet[8].options", _array)
                    }, error => {
                    });
                }
                //代理商
                mchtIdent = dataArray.mchtIdent;
                if (dataArray.mchtIdent == '3') {
                    // 添加：上级商户编号不要 商户类型 1 二级分类 2  抓取标志 1 商区园区标识 business 人均0 商户设施000000000000 营业时间00:00-23:00
                    self.columnsSet.find(data => data.data == "upperMchtName").edit = false;
                    //商户类型 主类型 次类型
                    self.columnsSet.find(data => data.data == "mchtLvl").edit = false;
                    self.columnsSet.find(data => data.data == "mchtEquip").options = '';
                    self.columnsSet.find(data => data.data == "streamDbt").options = '';
                    self.columnsSet.find(data => data.data == "mchtPer").edit = false;
                    self.columnsSet.find(data => data.data == "mchtFacil").checkboxOptions = '';
                    self.columnsSet.find(data => data.data == "mchtBusTime").datetime = false;
                    self.columnsSet.find(data => data.data == "mchtBusEndTime").datetime = false;
                    self.columnsSet.find(data => data.data == "mchtBusTime2").datetime = false;
                    self.columnsSet.find(data => data.data == "mchtBusEndTime2").datetime = false;
                } else {
                    self.columnsSet.find(data => data.data == "upperMchtName").edit = true;
                    self.columnsSet.find(data => data.data == "mchtLvl").edit = true;
                    self.columnsSet.find(data => data.data == "mchtEquip").options = [
                        {key: "有", value: "0"},
                        {key: "没有", value: "1"},
                    ];
                    self.columnsSet.find(data => data.data == "streamDbt").options = [
                        {key: "商区", value: "business"},
                        {key: "园区", value: "park"},
                    ];
                    self.columnsSet.find(data => data.data == "mchtPer").edit = true;
                    self.columnsSet.find(data => data.data == "mchtFacil").checkboxOptions = [
                        {key: "WIFI", value: "A1"},
                        {key: "可停车", value: "A2"},
                        {key: "刷卡", value: "A3"},
                        {key: "卡座", value: "A4"},
                        {key: "包间", value: "A5"},
                        {key: "宝宝椅", value: "A6"},
                        {key: "无烟区", value: "A7"},
                        {key: "吸烟区", value: "A8"},
                        {key: "沙发位", value: "A9"},
                        {key: "露天位", value: "A10"},
                        {key: "表演", value: "A11"},
                        {key: "景观位", value: "A12"},
                    ];
                    self.columnsSet.find(data => data.data == "mchtBusTime").datetime = true;
                    self.columnsSet.find(data => data.data == "mchtBusEndTime").datetime = true;
                    self.columnsSet.find(data => data.data == "mchtBusTime2").datetime = true;
                    self.columnsSet.find(data => data.data == "mchtBusEndTime2").datetime = true;

                }
                //赋图片地址给file
                self.item.file = dataArray.mchtLogUrl;
                //修改框里转化时间显示格式
                self.item.tmpTime = dataArray.enterTime;
                self.item.enterTime = dateFormat(dataArray.enterTime);

                //让设施默认被选中
                let _arrFacil = dataArray.mchtFacil.split(""); //["1","0","1"....]
                let checkedArr = []
                _arrFacil.forEach((item, index) => {
                    if (item === '1') {
                        checkedArr.push(self.mchtSheshi[index].value)
                    }
                })
                self.item.mchtFacil = checkedArr
                //让营业日默认被选中
                var _set = new Set(dataArray.mchtBusDay);
                if (_set.has(",")) {
                    _set.delete(",");
                }
                var _arrDay = Array.from(_set);
                let checkedDayArr = []
                _arrDay.forEach((item, index) => {
                    checkedDayArr.push(self.mchtDay[item - 1].value)
                })
                self.item.mchtBusDay = checkedDayArr
                //让营业日2默认被选中
                var _set2 = new Set(dataArray.mchtBusDay2);
                if (_set2.has(",")) {
                    _set2.delete(",");
                }
                var _arrDay2 = Array.from(_set2);
                let checkedDayArr2 = []
                _arrDay2.forEach((item, index) => {
                    checkedDayArr2.push(self.mchtDay2[item - 1].value)
                })
                self.item.mchtBusDay2 = checkedDayArr2


                //编辑框验证、保存、提交
                $(self.$els.mform).validate(self.item.valdate = {
                    async submitHandler () {
                        var form = self.$els.mform
                        let formData = new FormData(form);
                        //处理商户设施
                        var _str = '';
                        $("input[name=mchtFacil]").each(function () {
                            _str += $(this).prop("checked") ? '1' : '0';
                        });
                        //处理营业日2
                        var _dayStr2 = '';
                        $("input[name=mchtBusDay2]").each(function () {
                            if ($(this).is(":checked")) {
                                _dayStr2 += $(this).val().replace("B", "");
                            }
                        });
                        _dayStr2 = _dayStr2.split('').join(",");
                        //处理营业时间段
                        // console.log($("input[name = 'mchtBusEndTime']").val())
                        var mchtBusEndTimeVal = $("input[name = 'mchtBusEndTime']").val();
                        var mchtBusTime = dataArray.mchtBusTime + '-' + mchtBusEndTimeVal;
                        if (dataArray.mchtBusTime2 != '' && $("input[name = 'mchtBusEndTime2']").val() != '') {
                            var mchtBusTime2 = dataArray.mchtBusTime2 + '-' + $("input[name = 'mchtBusEndTime2']").val();
                            formData.set("mchtBusTime2", mchtBusTime2);
                        }
                        if (dataArray.modFlag == '0') {
                            formData.set("mchtType", self.item.mchtType);
                            formData.set("mchtType2", self.item.mchtType2);
                        }

                        formData.set("mchtName", self.item.mchtName);
                        formData.set("mchtRName", self.item.mchtRname);
                        formData.set("mchtLvl", self.item.mchtLvl);
                        formData.set("upperMchtId", self.item.upperMchtId);
                        formData.set("enterTime", self.item.tmpTime);
                        formData.set("mchtFacil", _str);
                        formData.set("mchtBusDay", self.item.mchtBusDay);
                        formData.set("mchtBusDay2", _dayStr2);
                        formData.set("mchtBusTime", mchtBusTime);

                        if (dataArray.mchtIdent == '3') {
                            formData.set("mchtType", '1');
                            formData.set("mchtLvl", '0');
                            formData.set("mchtEquip", '1');
                            formData.set("streamDbt", 'business');
                            formData.set("mchtType2", '2');
                            formData.set("mchtPer", '0');
                            formData.set("mchtFacil", '000000000000');
                            formData.set("mchtBusTime", '00:00-23:00')
                        }
                        var result = await self.$post({
                            url: "/api/v2" + projectName_Url + "/plat/mcht/update/" + self.item.mchtId,
                            data: formData,
                            method: "POST"
                        });
                        Midway.alert({title: "操作提示", content: result.errorInfo})

                        dataTable.ajax.reload(null, false);
                        $(self.$els.modal).modal('hide');
                        self.resetBindDrag()
                    },
                    rules: {
                        mchtName: {
                            required: true,
                            maxlength: 64
                        },
                        mchtRname: {
                            maxlength:64
                        },
                        mchtPer: {
                            required: true,
                            min: 1
                        },
                        mchtMainType: {
                            required: true
                        },
                        mchtType: {
                            required: true
                        },
                        mchtType2: {
                            required: true
                        },
                        mchtLvl: {
                            required: true,
                            maxlength: 2
                        },
                        mchtDsc: {
                            // maxlength:50
                            maxlength: 300
                        },
                        streamDbt: {
                            required: true
                        },
                        mchtFacil: {
                            required: true
                        },
                        mchtBusDay: {
                            required: true
                        },
                        mchtBusTime: {
                            required: true
                        },
                        mchtBusEndTime: {
                            required: true
                        },
                        mchtTel1: {
                            required: true,
                            isPhone: true
                        },
                        mchtTel2: {
                            isPhone: true
                        },
                        mchtTel3: {
                            isPhone: true
                        },
                        mchtTel4: {
                            isPhone: true
                        },
                        mchtAddr: {
                            required: true,
                            maxlength: 50
                        },
                        enterTime: {
                            required: true
                        },
                    }
                });
                // $(self.$els.updateModal).modal('show');

                $(".modal-body tbody tr:nth-child(19)").click(function () {
                    if ($("input[name = 'mchtBusDay2']:checked").length >= 1) {
                        $(self.$els.mform.mchtBusTime2).rules("add", {
                            required: true,
                        });
                        $(self.$els.mform.mchtBusEndTime2).rules("add", {
                            required: true,
                        });
                    } else {
                        $(self.$els.mform.mchtBusTime2).rules("remove", "required");
                        $(self.$els.mform.mchtBusEndTime2).rules("remove", "required");
                    }
                })

                self.$nextTick(function () {
                    self.$refs.modal.init();
                })
            });

            $(self.$el).on("click", ".state", async function () {
                var Row = $(this).closest('tr').get(0);
                var mchtName = dataTable.row(Row).data().mchtName;
                var id = dataTable.row(Row).data().mchtId;
                let state = dataTable.row(Row).data().mchtStat;
                let mchtIdent = dataTable.row(Row).data().mchtIdent;
                if (state == 1) {
                    await Midway.confirm({
                        title: "开启商户",
                        content: "是否要开启商户:" + mchtName + "?"
                    })
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/mcht/again/" + id,
                        method: "POST"
                    });
                } else {
                    await Midway.confirm({
                        title: "退出商户",
                        content: "是否要退出商户:" + mchtName + "?"
                    })
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/mcht/exit/" + id,
                        method: "POST"
                    });
                }
                Midway.alert({title: "操作提示", content: result.errorInfo})
                dataTable.ajax.reload(null, false);
                $(self.$els.updateModal).modal('hide');
                self.resetBindDrag()
                // dataTable.ajax.reload();
            });

            $(self.$el).on("click", ".detail", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                self.item = dataArray;
                dateTime()
                dataArray.enterTime = dateFormat(dataArray.enterTime);
                //审核验证、保存、提交
                $(self.$els.detailMform).validate(self.item.valdate = {
                    async submitHandler () {
                        var form = self.$els.detailMform;
                        var _data = serialize(form, {hash: true, disabled: true, empty: true});
                        // return flase
                        await self.$post({
                            url: "/api/v1" + projectName_Url + "/plat/mcht/" + dataArray.mchtId,
                            data: _data,
                            method: "get"
                        });
                        dataTable.ajax.reload(null, false);
                        $(self.$els.modal).modal('hide');
                        self.resetBindDrag()
                    },
                });
                $(self.$els.detailModal).modal('show');
                //处理商户设施多选数据
                let _mchtFacil = ["WIFI", "可停车", "刷卡", "卡座", "包间", "宝宝椅", "无烟区", "吸烟区", "沙发位", "露天位",
                    "表演", "景观位"];
                let _array = self.item.mchtFacil.split("");
                let _str = '';
                let map = new Map();
                var _index = 0;
                _mchtFacil.forEach(function (key) {
                    map.set(key, _array[_index]);
                    _index++;
                });
                map.forEach(function (key, value) {
                    if (key == "1") {
                        _str += value + " "
                    }
                });
                self.mchtFacil = _str;

                //处理使用日期多选数据
                let _myArray = self.item.mchtBusDay.split(",");
                let _myStr = '';
                let set = new Set();
                _myArray.forEach(s => set.add(s));
                if (set.has("1")) {
                    _myStr += "星期一" + " "
                }
                if (set.has("2")) {
                    _myStr += "星期二" + " "
                }
                if (set.has("3")) {
                    _myStr += "星期三" + " "
                }
                if (set.has("4")) {
                    _myStr += "星期四" + " "
                }
                if (set.has("5")) {
                    _myStr += "星期五" + " "
                }
                if (set.has("6")) {
                    _myStr += "星期六" + " "
                }
                if (set.has("7")) {
                    _myStr += "星期日" + " "
                }
                self.mchtBusDay = _myStr;

                //处理使用日期2多选数据
                let _myArray2 = self.item.mchtBusDay2.split(",");
                let _myStr2 = '';
                let set2 = new Set();
                _myArray2.forEach(s => set2.add(s));
                if (set2.has("1")) {
                    _myStr2 += "星期一" + " "
                }
                if (set2.has("2")) {
                    _myStr2 += "星期二" + " "
                }
                if (set2.has("3")) {
                    _myStr2 += "星期三" + " "
                }
                if (set2.has("4")) {
                    _myStr2 += "星期四" + " "
                }
                if (set2.has("5")) {
                    _myStr2 += "星期五" + " "
                }
                if (set2.has("6")) {
                    _myStr2 += "星期六" + " "
                }
                if (set2.has("7")) {
                    _myStr2 += "星期日" + " "
                }
                self.mchtBusDay2 = _myStr2;

                //营业时间段1加次日
               var time = dataArray.mchtBusTime.split("-");
               dataArray.mchtBusTime = $.trim(time[0]);
               dataArray.mchtBusEndTime = $.trim(time[1]);
               if(dataArray.mchtBusTime >= dataArray.mchtBusEndTime){
                  self.item.mchtBusTime = dataArray.mchtBusTime + '-' +dataArray.mchtBusEndTime + '(次日)';
               }else{
                   self.item.mchtBusTime = dataArray.mchtBusTime + '-' +dataArray.mchtBusEndTime
               };
                //营业时间段2加次日
               if(dataArray.mchtBusTime2 != ''){
                   var time2 = dataArray.mchtBusTime2.split("-");
                   dataArray.mchtBusTime2 = $.trim(time2[0]);
                   dataArray.mchtBusEndTime2 = $.trim(time2[1]);
                   if(dataArray.mchtBusTime2 >= dataArray.mchtBusEndTime2){
                       self.item.mchtBusTime2 = dataArray.mchtBusTime2 + '-' +dataArray.mchtBusEndTime2 + '(次日)';
                   }else{
                       self.item.mchtBusTime2 = dataArray.mchtBusTime2 + '-' +dataArray.mchtBusEndTime2
                   }
               }
            });
        },
        beforeDestroy () {
            $(this.$el).off("click")
        },
    }
</script>
